<template>
  <div>
    <el-form label-width="100px">
      <el-form-item label="表单名称">
        <el-input v-model="fs.form.title" />
      </el-form-item>
      <el-form-item label="表单尺寸">
        <el-radio-group v-model="fs.form.size" size="small">
          <el-radio-button label="large">较大</el-radio-button>
          <el-radio-button label="default">中等</el-radio-button>
          <el-radio-button label="small">较小</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="标签对齐">
        <el-radio-group v-model="fs.form.labelPosition" size="small">
          <el-radio-button label="left">左对齐</el-radio-button>
          <el-radio-button label="right">右对齐</el-radio-button>
          <el-radio-button label="top">顶部对齐</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="标签宽度(px)">
        <el-input-number v-model="fs.form.labelWidth" :min="1" controls-position="right" />
      </el-form-item>
      <el-form-item label="行间隔(px)">
        <el-input-number v-model="fs.form.rowSpacing" :min="10" controls-position="right" />
        <span class="tip">设计页面保留10px间距</span>
      </el-form-item>
      <el-form-item label="组件边框">
        <el-switch v-model="fs.form.showCompBorder" />
      </el-form-item>
      <el-divider style="margin-left: 10px" />
      <div class="auth-wrap">
        <label>按钮权限：</label>
        <el-collapse style="margin-left: 15px">
          <el-collapse-item v-for="t in tasks" :key="t.id" :title="`${t.name} [${t.id}]`">
            <div class="task">
              <el-switch v-model="fs.form.button[t.id].back.allow" size="small" />
              允许退回到上一步
              <div class="name">
                <el-input v-model="fs.form.button[t.id].back.name" size="small">
                  <template #prepend>按钮名称</template>
                </el-input>
              </div>
            </div>
            <div class="task">
              <el-switch v-model="fs.form.button[t.id].backToFirst.allow" size="small" />
              允许退回到发起
              <div class="name">
                <el-input v-model="fs.form.button[t.id].backToFirst.name" size="small">
                  <template #prepend>按钮名称</template>
                </el-input>
              </div>
            </div>
            <div class="task">
              <el-switch v-model="fs.form.button[t.id].forward.allow" size="small" />
              允许转发
              <div class="name">
                <el-input v-model="fs.form.button[t.id].forward.name" size="small">
                  <template #prepend>按钮名称</template>
                </el-input>
              </div>
            </div>
            <div class="task">
              <el-switch v-model="fs.form.button[t.id].reject.allow" size="small" />
              允许驳回
              <div class="name">
                <el-input v-model="fs.form.button[t.id].reject.name" size="small">
                  <template #prepend>按钮名称</template>
                </el-input>
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
      <!-- <el-form-item label="流程">
        <el-select v-model="fs.form.processDefKey" style="width: 100%" placeholder="请选择流程">
          <el-option v-for="f in flowKeys" :key="f.value" :value="f.value" :label="f.label" />
        </el-select>
        <el-radio-group v-model="useVersion" class="radio-group">
          <el-radio :label="1">使用最新版本</el-radio>
          <el-radio :label="2">使用特定版本</el-radio>
        </el-radio-group>
        <el-select v-model="fs.form.processDefId" v-show="useVersion == 2" placeholder="请输入选择流程版本">
          <el-option v-for="v in flowVersions" :key="v.deploymentId" :value="v.deploymentId" :label="`V${v.version}`" />
        </el-select>
      </el-form-item> -->
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { watch, computed } from 'vue'
import {
  ElForm,
  ElFormItem,
  ElInput,
  ElInputNumber,
  ElRadioGroup,
  ElRadioButton,
  ElSwitch,
  ElCollapse,
  ElCollapseItem,
  ElDivider
} from 'element-plus'
import { useFlowStore } from '@/stores/flow'

const fs = useFlowStore()
const tasks = computed(() => fs.tasks.filter(t => t.order > 0))
const initButton = () => {
  const button = {} as any
  tasks.value.forEach(t => {
    if (t.order > 0) {
      const oldData = fs.form.button[t.id] || {}
      button[t.id] = Object.assign(
        {
          back: { allow: false, name: '退回到上一步' },
          backToFirst: { allow: false, name: '退回到发起' },
          forward: { allow: false, name: '转发' },
          reject: { allow: true, name: '驳回' }
        },
        oldData
      )
    }
  })
  fs.form.button = button
}
watch(
  () => tasks.value,
  () => {
    initButton()
  }
)
</script>

<style lang="scss" scoped>
.tip {
  color: $--color-text-secondary;
  font-size: $--size-font-x-small;
}
.auth-wrap {
  padding-left: 10px;
  :deep(.el-collapse) {
    border-top: 0;
    border-bottom: 0;
    .el-collapse-item {
      .el-collapse-item__header {
        font-weight: normal;
      }
      &:last-child {
        .el-collapse-item__header {
          border-bottom: 0;
        }
      }
    }
  }
  .task {
    padding-left: 10px;
    &:not(:last-child) {
      margin-bottom: 10px;
    }
    .name {
      margin-left: 30px;
      :deep(.el-input-group__prepend) {
        padding: 0 6px;
      }
    }
  }
}
</style>
